import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './pages/Home';
import Styles from './pages/Styles';
import Gallery from './pages/Gallery';
import About from './pages/About';
import Contact from './pages/Contact';
import Login from './pages/Login';
import Register from './pages/Register';
// import Settings from './pages/Settings'; // Removed import
import GoogleCallback from './pages/GoogleCallback';
import GitHubCallback from './pages/GitHubCallback';
import BuyCredits from './pages/BuyCredits';
import TextDesign from './pages/TextDesign';
import ProtectedRoute from './components/ProtectedRoute';
import Profile from './pages/Profile';
import DesignGallery from './pages/DesignGallery';
import DesignStats from './pages/DesignStats';
// 新增的页面组件
import ProfileInfo from './pages/ProfileInfo';
import ProfileBilling from './pages/ProfileBilling';
import RoomDesign from './pages/RoomDesign';

const App: React.FC = () => {
  // Use type assertion to fix React 18 compatibility issues with react-router-dom v5
  const RouterComponent = Router as any;
  const SwitchComponent = Switch as any;
  const RouteComponent = Route as any;
  const RedirectComponent = Redirect as any;

  return (
    <AuthProvider>
      <RouterComponent>
        <div className="flex flex-col min-h-screen">
          <Navbar />
          <main className="flex-grow">
            <SwitchComponent>
              <RouteComponent exact path="/">
                <Home />
              </RouteComponent>
              <RouteComponent path="/styles">
                <Styles />
              </RouteComponent>
              <RouteComponent path="/gallery">
                <Gallery />
              </RouteComponent>
              <RouteComponent path="/about">
                <About />
              </RouteComponent>
              <RouteComponent path="/contact">
                <Contact />
              </RouteComponent>
              <RouteComponent exact path="/login" component={Login} />
              <RouteComponent exact path="/register" component={Register} />
              {/* <RouteComponent exact path="/settings" component={Settings} /> */}{/* Removed route */}
              <RouteComponent exact path="/auth/google/callback" component={GoogleCallback} />
              <RouteComponent exact path="/auth/github/callback" component={GitHubCallback} />
              <ProtectedRoute exact path="/room-design" component={RoomDesign} />
              <ProtectedRoute exact path="/design-gallery" component={DesignGallery} />
              <ProtectedRoute exact path="/design-stats" component={DesignStats} />
              <RouteComponent path="/buy-credits">
                <BuyCredits />
              </RouteComponent>
              <RouteComponent path="/text-design">
                <TextDesign />
              </RouteComponent>
              <ProtectedRoute exact path="/profile" component={Profile} />
              
              {/* 新增的页面路由 */}
              <ProtectedRoute exact path="/profile-info" component={ProfileInfo} />
              <ProtectedRoute exact path="/profile-billing" component={ProfileBilling} />
              
              {/* 保留旧路径的重定向 */}
              <RouteComponent path="/features">
                <RedirectComponent to="/styles" />
              </RouteComponent>
              <RouteComponent path="/how-it-works">
                <RedirectComponent to="/gallery" />
              </RouteComponent>
              
              {/* 重定向旧的设计相关页面到新页面 */}
              <RouteComponent path="/profile-designs">
                <RedirectComponent to="/room-design" />
              </RouteComponent>
              <RouteComponent path="/profile-text-to-image">
                <RedirectComponent to="/room-design" />
              </RouteComponent>
              <RouteComponent path="/design">
                <RedirectComponent to="/room-design" />
              </RouteComponent>
            </SwitchComponent>
          </main>
          <Footer />
        </div>
      </RouterComponent>
    </AuthProvider>
  );
};

export default App;













